<template>
	<div class="main-con" v-loading="loading">
		<div id="head">
			<div v-if="assetManage.state == '5' || assetManage.state == '6'" class="back-con">
				<i style="color: RGBA(234, 48, 92, 1); margin-right: 10px" class="el-icon-warning"></i>
				<span>驳回原因: {{ assetManage.state == '6' ? assetManage.backNotes : assetCheckConfirm.notes }}</span>
				<el-link style="margin-left: 50px" v-if="assetManage.state == '5'" type="success" :underline="false" @click="showCheckInfo">查看验收项</el-link>
			</div>
			<div :class="['head-card', assetManage.state == '5' || assetManage.state == '6' ? 'noRadius' : 'hasRadius']">
				<div class="head-con">
					<div class="img-con">
						<img class="left-img" src="@/assets/image/serverRoom/zcgl.svg" />
					</div>
					<el-descriptions class="head-descriptions" :title="`上架申请单号: ${assetManage.orderTitle} (单据编号：${assetManage.orderNum})`" :column="4">
						<el-descriptions-item label="创建人">{{ assetManage.createUserName }}</el-descriptions-item>
						<el-descriptions-item label="申请时间">{{ dateFormat(assetManage.createTime, 'yyyy-MM-dd HH:mm:ss') }}</el-descriptions-item>
						<el-descriptions-item label="所属项目">{{ assetManage.proName }}</el-descriptions-item>
						<el-descriptions-item label="备注">{{ assetManage.notes }}</el-descriptions-item>
						<el-descriptions-item label="实施厂商">{{ assetManage.executeManufacturerName }}</el-descriptions-item>
						<el-descriptions-item label="实施负责人">{{ assetManage.executeLeaderName }}</el-descriptions-item>
						<el-descriptions-item label="负责人手机号">{{ assetManage.executeLeaderTel }}</el-descriptions-item>
					</el-descriptions>
					<div class="status-con">
						<div class="top">状态</div>
						<div class="bottom">{{ assetManage.stateName }}</div>
					</div>
				</div>
				<div v-if="showOprBtn" class="head-btn">
					<el-button v-if="assetManage.state == '1'" type="default" size="small" @click="rejectHandler">驳回</el-button>
					<el-button v-if="assetManage.state == '1'" type="primary" size="small" @click="passHandler">通过</el-button>
					<el-button v-if="assetManage.state == '3'" type="primary" size="small" @click="commitCheck">提交验收</el-button>
					<el-button v-if="assetManage.state == '4'" type="primary" size="small" @click="checkPassHandler">验收确认</el-button>
					<el-button v-if="assetManage.state == '5'" type="primary" size="small" @click="commitCheck">重新验收</el-button>
				</div>
			</div>
		</div>
		<div class="info-con">
			<el-tabs class="tabs" v-model="infoTabs" tab-position="top">
				<el-tab-pane label="详情" name="1">
					<div class="title-con">
						<div>上架资产信息</div>
						<div v-if="['2', '3', '4', '5', '7'].includes(assetManage.state)">
							<el-button type="default" size="mini" @click="assetExport">资产导出</el-button>
							<el-button type="default" size="mini" v-print="'#printStyle'">批量打印二维码</el-button>
						</div>
					</div>
					<el-table :data="assetManage.assetList" max-height="550" stripe class="systemTable" empty-text=" ">
						<el-table-column prop="assetNum" label="资产编号" min-width="150" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="assetTypeName" label="资产类型" min-width="150" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="assetModel" label="资产型号" min-width="150" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="assetSerialNum" label="资产序列号" min-width="150" show-overflow-tooltip> </el-table-column>
						<template v-if="showIpState.includes(assetManage.state)">
							<el-table-column prop="hostIp" label="IP" min-width="140" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="hostPlace" label="位置" min-width="120" show-overflow-tooltip> </el-table-column>
						</template>
						<el-table-column prop="hostName" label="主机名" min-width="150" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="hostNameCn" label="主机中文名" min-width="150" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="assetUName" label="资产U数" width="120"> </el-table-column>
						<el-table-column prop="safeZoneName" label="安全区域" width="120"> </el-table-column>
						<el-table-column prop="beSystem" label="业务系统" width="120"> </el-table-column>
						<el-table-column prop="reserveSourcesName" label="是否为后备资产" min-width="90"> </el-table-column>
						<el-table-column width="80" label="操作" align="center">
							<template v-slot="{ row }">
								<el-button class="text-btn-table" type="text" size="medium" v-print="`#pc-${row.hisId}`">二维码</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="审核流程" name="2">
					<flow-info :formId="assetManage.id" :finish="flowFinish"></flow-info>
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-dialog class="dialog" title="资产登记审核通过" :visible.sync="showAgreeWin" width="30%" :before-close="handleAgreeClose">
			<div style="font-size: 16px; font-family: PingFang SC; font-weight: 400">
				您确定要通过本项目的资产信息登记审核？
			</div>
			<div
				style="
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				"
			>
				项目名称：{{ assetManage.proName }}
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="handleAgreeClose">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmitAgree">确认</el-button>
			</div>
		</el-dialog>
		<check-info-win dialogTitle="上架验收结果" :checkForm="assetCheckConfirm" :showWin.sync="showCheckInfoWin" checkType="put" />
		<check-win
			dialogTitle="上架验收确认"
			:showWin.sync="showCheckPassWin"
			:checkData="assetManage"
			:dataId="assetManage.id"
			checkType="put"
			@onPass="loadInfo(assetManage.id)"
			@onBack="loadInfo(assetManage.id)"
		/>
		<div style="display: none">
			<div ref="print" id="printStyle">
				<div class="asset-print" v-for="asset in assetManage.assetList" :key="asset.hisId">
					<asset-print :asset="asset" printType="running" :userName="assetManage.executeLeaderName" />
				</div>
			</div>
			<div v-for="asset in assetManage.assetList" :key="asset.hisId" :id="`pc-${asset.hisId}`">
				<div class="asset-print">
					<asset-print :asset="asset" printType="running" :userName="assetManage.executeLeaderName" />
				</div>
			</div>
		</div>
		<asset-flow-send v-if="showFlowSend" @close="closeFlowSend" :checkType="checkFlowType" @ok="FlowSendsave" :instNodeId="instNodeId" :sendtype="sendtype" :wfUrl="wfUrl"></asset-flow-send>
	</div>
</template>

<script>
	import winFlowView from '@/system/components/winFlowView.vue';
	import CheckInfoWin from './models/CheckInfoWin';
	import CheckWin from './models/CheckWin';
	import FlowInfo from './models/FlowInfo';
	import assetPutawayApi from '@/api/assetPutawayApi';
	import { getAction, postAction } from '@/utils/httpUtil';
	import { dateFormat } from '@/utils/public';
	import AssetPrint from './models/AssetPrint';
	import assetFlowMixin from '@/mixins/assetFlowMixin';
	export default {
		name: 'assetPutawayInfo',
		components: {
			CheckInfoWin,
			CheckWin,
			FlowInfo,
			winFlowView,
			AssetPrint,
		},
		mixins: [assetFlowMixin],
		data() {
			return {
				assetManage: {
					assetList: [],
				},
				assetCheckConfirm: {},
				flowActive: 1,
				agreeForm: {
					reason: '',
				},
				assetInfoData: {},
				infoTabs: '1',
				showAgreeWin: false,
				showCheckInfoWin: false,
				showCheckPassWin: false,
				showBtnState: ['1', '3', '4', '5'], //, '6'
				showIpState: ['3', '4', '5', '7'],
				printContent: {
					id: 'printStyle',
					preview: true, // 预览工具是否启用
					previewTitle: '', // 预览页面的标题
					popTitle: '', // 打印页面的页眉
					extraCss: '',
					extraHead: '',
				},
				wfUrl: {
					getSendToUrl: '/assetManagePut/getSendTo',
					sendToUrl: '/assetManagePut/sendTo',
					getBackToUrl: '/assetManagePut/getBackTo',
					backToUrl: '/assetManagePut/backTo',
				},
				loading: false,
			};
		},
		computed: {
			flowFinish() {
				return this.assetManage.state == '7';
			},
			showOprBtn() {
				return this.assetManage.wfInstNodeId && this.showBtnState.includes(this.assetManage.state) ? true : false;
			},
		},
		mounted() {
			const { params } = this.$route;
			if (params && params.id) {
				this.loadInfo(params.id);
			}
		},
		methods: {
			dateFormat,
			setInfoHeight() {
				let contentHeight = document.getElementsByClassName('main-con')[0].offsetHeight;
				let height = document.getElementById('head').offsetHeight;
				document.getElementsByClassName('info-con')[0].style.height = `${contentHeight - height - 10}px`;
			},
			loadInfo(id) {
				this.loading = true;
				getAction(assetPutawayApi.detial + id).then(res => {
					this.loading = false;
					if (res.success && res.info) {
						this.assetManage = res.info;
						if (res.info.assetCheckConfirm) {
							this.assetCheckConfirm = res.info.assetCheckConfirm;
						}
					}
					this.$nextTick(() => {
						this.setInfoHeight();
					});
				});
			},
			/**
			 *
			 * 驳回
			 */
			// rejectHandler() {
			// 	this.$prompt('驳回原因: ', '资产上架提交驳回', {
			// 		cancelButtonText: '取消',
			// 		confirmButtonText: '确定',
			// 		inputValidator: function(val) {
			// 			if (val) return true
			// 			else return false
			// 		},
			// 		inputErrorMessage: '请输入驳回原因',
			// 		inputPlaceholder: '请输入驳回原因',
			// 	})
			// 		.then(({ value }) => {
			// 			postAction(assetPutawayApi.putBack, {
			// 				assetManageId: this.assetManage.id,
			// 				backNotes: value,
			// 			}).then(res => {
			// 				if (res.success) {
			// 					this.loadInfo(this.assetManage.id)
			// 				}
			// 			})
			// 		})
			// 		.catch(() => {})
			// },
			confirmHandler() {
				this.showAgreeWin = true;
			},
			/**
			 * 查看验收项
			 */
			showCheckInfo() {
				this.showCheckInfoWin = true;
			},
			/**
			 * 验收确认
			 */
			checkPassHandler() {
				this.showCheckPassWin = true;
			},

			/**
			 * 同意
			 * @param {*} row
			 */
			onSubmitAgree() {
				postAction(assetPutawayApi.putPass, {
					assetManageId: this.assetManage.id,
				}).then(res => {
					if (res.success) {
						this.loadInfo(this.assetManage.id);
					}
				});
				this.showAgreeWin = false;
			},
			handleAgreeClose() {
				this.showAgreeWin = false;
			},
			assetExport() {
				window.open(`${assetPutawayApi.exportData}?assetManageId=${this.assetManage.id}`, '_blank');
			},
			batchPrintQRCode() {},
			showQRCode(row) {},
			passHandler() {
				this.showFlowSend = true;
				this.checkFlowType = 1;
				this.sendtype = 1;
				this.instNodeId = this.assetManage.wfInstNodeId;
			},
			rejectHandler() {
				this.showFlowSend = true;
				this.checkFlowType = 1;
				this.sendtype = -1;
				this.instNodeId = this.assetManage.wfInstNodeId;
			},
			flowCallback() {
				this.loadInfo(this.assetManage.id);
			},
			commitCheck(row) {
				this.showFlowSend = true;
				this.checkFlowType = 2;
				this.sendtype = 1;
				this.instNodeId = this.assetManage.wfInstNodeId;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.back-con {
		height: 40px;
		background: RGBA(252, 224, 231, 1);
		// opacity: 0.15;
		border-radius: 6px 6px 0px 0px;
		color: #333333;
		padding-left: 15px;
		display: flex;
		align-items: center;
	}

	.noRadius {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.hasRadius {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.head-card {
		background: #ffffff;
		padding: 15px 15px 10px 15px;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.head-con {
		display: flex;
		flex-direction: row;
	}

	.head-btn {
		border-top: 1px solid #f0f0f0;
		// display: flex;
		// justify-content: end;
		text-align: right;
		padding-top: 10px;
	}

	.img-con {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		background: linear-gradient(-28deg, #22b6de, #33e4da);

		img {
			width: 27px;
			height: 27px;
			margin-top: 10px;
			box-shadow: 2px 6px 5px 0px rgba(25, 90, 166, 0.23);
		}
	}

	.head-descriptions {
		flex: 1;
		margin: 15px 0 0 15px;
	}

	.status-con {
		// width: 90px;
		text-align: right;

		.top {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
		}

		.bottom {
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.info-con {
		margin-top: 10px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		padding: 15px 15px 10px 15px;
	}

	// .hasBtnCon {
	// 	min-height: calc(100% - 210px);
	// }

	// .hasNoBtnCon {
	// 	min-height: calc(100% - 236px);
	// }

	.tabs {
		height: 100%;

		/deep/.el-tabs__content {
			height: calc(100% - 55px);
			.el-tab-pane {
				height: 100%;
			}
		}
	}
	.flow-con {
		height: 194px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		margin-top: 10px;
		padding: 15px 15px 10px 15px;
	}

	.steps {
		padding-top: 20px;

		/deep/.el-step__line {
			top: 8px;
			height: 8px;

			i {
				border-width: 4px !important;
			}
		}

		/deep/.el-step__icon {
			border: 2px solid #ffffff;
			box-shadow: 1px 3px 6px 0px rgba(0, 118, 90, 0.24);
			font-size: 24px;
		}
	}

	.title-con {
		height: 30px;
		padding-left: 10px;
		border-left: 2px solid rgba(33, 183, 149, 1);
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.asset-list {
		display: flex;
		color: #606266;
		margin-bottom: 10px;
	}

	.marginLeft {
		margin-left: 14px;
	}

	.dialog {
		/deep/.el-dialog__footer {
			padding: 0 !important;
		}
	}

	.dialog-footer {
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		padding: 10px 15px;
	}
	.asset-print {
		display: flex;
		flex-direction: column;
	}
</style>
